<template>
  <div>
    <div class="img__container">
      <!-- 如果是一个绝对路径，webpack不会处理这个路径 -->
      <!-- <img src="/src/assets/images/1.jpg" alt="1.jpg"> -->
      <img src="../assets/images/1.jpg" alt="1.jpg" />
      <img src="@/assets/images/2.jpg" alt="2.jpg" />
      <img :src="month3" alt="3.jpg" />
      <img :src="imgPath" alt="4.jpg" />
      <img src="../assets/images/Webpack.svg" alt="Webpack.svg" />
    </div>

    <ul>
      <li><span class="iconfont">&#xe704;</span></li>
      <li><span class="iconfont">&#xe6a3;</span></li>
      <li><span class="iconfont">&#xe639;</span></li>
      <li><span class="iconfont">&#xe64d;</span></li>
      <li><span class="iconfont">&#xe891;</span></li>
    </ul>

    <div class="img__container">
      <img
        v-for="img in images"
        :key="img.id"
        :alt="img.alt"
        v-img-lazy="imgUrl(img.src)"
        src="@/assets/images/img_not_found.png"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import month3 from "@/assets/images/3.jpg";

const imgName = "4.jpg";
const imgPath = require(`@/assets/images/${imgName}`);

const images = [
  { id: 1, src: "1.jpg", alt: "1.jpg" },
  { id: 2, src: "2.jpg", alt: "2.jpg" },
  { id: 3, src: "3.jpg", alt: "3.jpg" },
  { id: 4, src: "4.jpg", alt: "4.jpg" },
  { id: 5, src: "5.jpg", alt: "5.jpg" },
  { id: 6, src: "6.jpg", alt: "6.jpg" },
  { id: 7, src: "7.jpg", alt: "7.jpg" },
  { id: 8, src: "8.jpg", alt: "8.jpg" },
  { id: 9, src: "9.jpg", alt: "9.jpg" },
  { id: 10, src: "10.jpg", alt: "10.jpg" },
  { id: 11, src: "11.jpg", alt: "11.jpg" },
  { id: 12, src: "12.jpg", alt: "12.jpg" },
];

const imgUrl = computed(
  () => (filename: string) => loadImage(filename)
);

const loadImage = (filename: string) => {
  try { 
    return require(`@/assets/images/${filename}`);
  } catch (error) {
    console.error(error)
    return require(`@/assets/images/404.png`);
  }
}
</script>

<style scoped lang="scss">
.img__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  img {
    width: 340px;
    height: 200px;
    margin: 16px;
  }
}
</style>

